<template>
    <div class="ZyMall">
        <ul class="ZyMallUl">
            <li>
                <img src="../../../../assets/Zymall/ZyMall1.png" alt="">
                <p>西班牙进口透明水晶玻璃...</p>
                <p>60至游币</p>
                <p>已兑换234件</p>
            </li>
            <li>
                <img src="../../../../assets/Zymall/ZyMall2.png" alt="">
                <p>休闲旅游出差便携收纳包...</p>
                <p>80至游币</p>
                <p>已兑换268件</p>
            </li>
            <li>
                <img src="../../../../assets/Zymall/ZyMall3.png" alt="">
                <p>爱国者HD806 便携式移动...</p>
                <p>400至游币</p>
                <p>已兑换162件</p>
            </li>
            <li>
                <img src="../../../../assets/Zymall/ZyMall4.png" alt="">
                <p>口水娃兰花豆蚕豆30g*20...</p>
                <p>70至游币</p>
                <p>已兑换457件</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {},
        data() {
            return {};
        },
        methods: {}
    };
</script>
<style>
    .ZyMallUl {
        width: 680px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .ZyMallUl > li {
        width: 330px;
        height: auto;
        background: white;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-radius: 20px;
    }

    .ZyMallUl > li > img {
        width: 100%;
        height: 266px;
        margin-bottom: 10px;
    }
    .ZyMallUl > li>p{
        padding-left: 10px;
    }
    .ZyMallUl > li>p:nth-child(2){
        font-size: 26px;
    }
    .ZyMallUl > li>p:nth-child(3){
        font-size: 26px;
        color: #f77754;
    }
    .ZyMallUl > li>p:nth-child(4){
        font-size: 22px;
        color: #999999;
    }

</style>
